<template>
    <div class="log-box ">
      <header class="header">
        <van-nav-bar
          title="登录"
          right-text="去注册"
          left-arrow
          @click-left="onClickLeft"
          @click-right="onClickRight"
        />
      <h2>唯品会</h2>
      <h4>品牌特卖</h4>
      </header>
      <div class="content">
        <van-tabs v-model="active">
          <van-tab title="用户名登录">
            <van-form @submit="onSubmituser">
              <van-field
                v-model="userName"
                name="userName"
                label="用户名"
                clearable
                placeholder="用户名"
                :right-icon="userTip"
              />
              <van-field
                v-model="passWord1"
                type="password"
                name="passWord"
                clearable
                label="密码"
                placeholder="密码"
                :right-icon="passwordTip1"
              />
              <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit" :disabled="allTip1">
                  登录
                </van-button>
              </div>
            </van-form>
          </van-tab>
          <van-tab title="手机号登录">
            <van-form @submit="onSubmittel">
              <van-field
                v-model="tel"
                name="tel"
                label="手机号"
                clearable
                placeholder="手机号"
                :right-icon="telTip"
              />
              <van-field
                v-model="passWord2"
                type="password"
                name="passWord"
                clearable
                label="密码"
                placeholder="密码"
                :right-icon="passwordTip2"
              />
              <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit" :disabled="allTip2">
                  登录
                </van-button>
              </div>
            </van-form>
          </van-tab>
        </van-tabs>
      </div>
    </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Form, Field, Button, Toast, Tab, Tabs } from 'vant'
import { login } from '../../api/index'
import { mapMutations } from 'vuex'

Vue.use(NavBar)
Vue.use(Form)
Vue.use(Field)
Vue.use(Button)
Vue.use(Toast)
Vue.use(Tab)
Vue.use(Tabs)

export default {
  data () {
    return {
      userName: '',
      tel: '',
      passWord1: '',
      passWord2: '',
      active: 0
    }
  },
  methods: {
    // 返回上一层
    onClickLeft () {
      this.$router.go(-2)
    },
    // 去登录页面
    onClickRight () {
      this.$router.push('/register')
    },
    onSubmituser (val) {
      login(val).then((res) => {
        // console.log(res.data)
        switch (res.data.state) {
          case 201:
            Toast({
              message: '请先注册',
              onClose: () => {
                this.$router.push('/register')
              }
            })
            break
          case 202:
            Toast('密码错误')
            break
          case 200:
            // 本地存储localstorage和cookie
            // 存储token
            localStorage.setItem('token', res.data.token)
            // 存储前端的登录状态
            localStorage.setItem('isLogin', 'ok')
            // 为了后续的方便操作，存储用户id
            localStorage.setItem('userId', res.data.userId)
            Toast({
              message: '登录成功',
              onClose: () => {
                this.$router.push('/index')
              }
            })
        }
      })
    },
    onSubmittel (val) {
      login(val).then((res) => {
        // console.log(res.data)
        switch (res.data.state) {
          case 201:
            Toast({
              message: '手机号未注册',
              onClose: () => {
                this.$router.push('/register')
              }
            })
            break
          case 202:
            Toast('密码错误')
            break
          case 200:
            // 本地存储localstorage和cookie
            // 存储token
            localStorage.setItem('token', res.data.token)
            // 存储前端的登录状态
            localStorage.setItem('isLogin', 'ok')
            // 为了后续的方便操作，存储用户id
            localStorage.setItem('userId', res.data.userId)

            // this.$store.commit('user/change_token', res.data.token)
            this.change_token(res.data.token)
            // this.$store.commit('user/change_isLogin', 'ok')
            this.change_isLogin('ok')
            // this.$store.commit('user/change_userId', res.data.userId)
            this.change_userId(res.data.userId)
            Toast({
              message: '登录成功',
              onClose: () => {
                console.log(this.$route.query.path)
                if (this.$route.query.path) {
                  // 跳转指定路由
                  this.$router.push(this.$route.query.path)
                } else {
                  // 跳转首页
                  this.$router.push('/index')
                }
              }
            })
        }
      })
    },
    ...mapMutations({
      change_isLogin: 'user/change_isLogin',
      change_userId: 'user/change_userId',
      change_token: 'user/change_token'
    })
  },
  computed: {
    userTip () {
      if (/^.{2,12}$/.test(this.userName)) {
        return 'success'
      } else {
        return ''
      }
    },
    telTip () {
      if (/^1[3-9]\d{9}$/.test(this.tel)) {
        return 'success'
      } else {
        return ''
      }
    },
    passwordTip1 () {
      if (/^\w{6,12}$/.test(this.passWord1)) {
        return 'success'
      } else {
        return ''
      }
    },
    passwordTip2 () {
      if (/^\w{6,12}$/.test(this.passWord2)) {
        return 'success'
      } else {
        return ''
      }
    },
    // 判断登录按钮是否可点击
    allTip1 () {
      if (this.userTip && this.passwordTip1) {
        return false
      } else {
        return true
      }
    },
    allTip2 () {
      if (this.telTip && this.passwordTip2) {
        return false
      } else {
        return true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.log-box{
  width:100%;
  height:100%;
  display: flex;
  flex-direction: column;
  .header{
    width:3.75rem;
    height:1.7rem;
    text-align: center;
    h2{
      margin:25px 0 0 0;
      font-size:38px;
      color:#ff0000;
    }
    h4{
      font-size:20px
    }
  }
}
</style>
